<template>
  <div class="wrapper">
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id">
      <img v-bind:src="item.imgUrl" class="img-swiper" :alt="item.info">
    </swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'homeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  }
}
</script>

<style  lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active/*>>>表示穿透,在全局中swiper-pagination-bullet-active的样式有效*/
    background: #fff
  .wrapper
    overflow hidden
    width 100%
    height 0
    padding-bottom 26.66%
    .img-swiper
      width 100%

</style>
